<template>
  <div class="user-info">
    <el-card>
      <h2>用户信息</h2>
      <!-- 用户基本信息 -->
    </el-card>
    <div class="favorites">
      <el-card>
        <h3>我的收藏</h3>
        <el-card class="restaurant-card" v-for="restaurant in userFavorites" :key="restaurant.id">
          <img :src="restaurant.image" alt="" class="restaurant-image">
          <div class="restaurant-info">
            <h3>{{ restaurant.name }}</h3>
          </div>
        </el-card>
      </el-card>
    </div>
    <div class="history">
      <el-card>
        <h3>历史记录</h3>
        <!-- 历史记录列表 -->
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userFavorites: [
        // 假设的数据
        {id: 1, name: '餐厅A', image: require('@/assets/img.png')},
        // 更多收藏...
      ]
    };
  }
};
</script>

<style>
.user-info {
  padding: 20px;
}

.favorites, .history {
  margin-top: 20px;
}

.restaurant-card {
  width: calc(25% - 10px);
}
</style>
